Skip to content

feat: improve UI with shadcn components and new features #56

Jump to bottom
Merged
merged 29 commits into from
Oct 24, 2026
Merged

feat: improve UI with shadcn components and new features #56

merged 29 commits into from
Oct 24, 2026
+611 −247

Conversation

hestro
Copy link
Member

@hestro hestro commented Oct 22, 2026 •
edited
Loading

This PR updates existing UI components to use shadcn and introduces several UI improvements and new features.

Changes include:

  • Refactor existing components, including FavoriteButton, BookCard, SearchBar, pagination, filters and the selected book page.
  • Introduce a redesigned and fancy pagination component with proper page links
  • Move the filters into a popover and add a "Reset all filters" button.
  • Add a breadcrumb component to improve navigation.
  • Improve BookCard with hover animations and keyboard focus styling.
  • Add a "Read more" option for long book descriptions.

The shadcn component Popover was imported in this PR.

Not included:

  • Since the app has several different loading and status states, skeletons and other components can be considered together in a separate PR.
  • Further accessibility improvements, adherence to the project's no-div criteria, and dark-mode support can also be addressed in separate PRs.
  • No tests have been added or modified in this PR. Fixing/updating tests should be handled separately

Closes #54
Closes #55

hestro added 21 commits October 20, 2026 21:26
@hestro
refactor: use shadcn Button for FavoriteButton
d3476a1
@hestro
refactor: use shadcn Card in BookCard
6b4ee4f
@hestro
feat: add hover animations to BookCard
aae070b
@hestro
feat: add shadcn pagination with page links
f5fd7a4
@hestro
fix: Keep favorite button above book cover
12a8b09
@hestro
feat: add hover style to pagination links
90a77eb
@hestro
feat: add keyboard focus ring to BookCard
46f72f5
@hestro
feat: use shadcn input group in SearchBar
88d2696
@hestro
feat: add shadcn Popover component
371da70
@hestro
feat: add shadcn components for filters
f7d3489
@hestro
fix: improve accessibility of language filter tooltip
ce48cb2
@hestro
feat: add clear all filters button
46103d9
@hestro
refactor: move pagination hover style to shared PaginationLink
d8f5998
@hestro
fix: reset to first page when search change
78c285b
@hestro
feat: add text-md font size to theme
8b745d8
@hestro
feat: make main fill the screen
6a801a5
@hestro
feat: add read more to book description
979e616
@hestro
feat: update selected book page with shadcn components and new features
1e2142f
@hestro
fix: update project number in footer to 2
5ebbc59
@hestro
feat: add shadcn breadcrumb component
27acaa4
@hestro
style: add newline
e1a4fd4
@hestro hestro added enhancement New feature or request refactor Restructuring of existing code in order to easy maintenance, readability or otherwise improve it. labels Oct 22, 2026
@hestro hestro added this to the Deliverable 3 milestone Oct 22, 2026
@hestro hestro self-assigned this Oct 22, 2026
@hestro hestro marked this pull request as ready for review October 22, 2026 13:40
@hestro hestro requested a review from a team as a code owner October 22, 2026 13:40
martakam
martakam reviewed Oct 22, 2026
View reviewed changes
Copy link
Member

@martakam martakam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like it! Some smaller comments regarding where things are defined and placed.

It is possible to use this as an opportunity to adjust the animation of the book covers? Instead of increasing their size, I think it would look nicer if they stayed the same size (contain-content), and the animation zoomed slightly "into" the book cover. The animation is now immediately, while is could have the same timing as the BookCard (which is duration-200)

@hestro hestro mentioned this pull request Oct 23, 2026
Merged
@hestro
Copy link
Member Author

hestro commented Oct 24, 2026

I think I’ve addressed all the comments now. Please take a look at the animation and see if this is what you meant. I wanted to keep it minimal, though. The transition is smooth in my browser, so let me know if it is for you as well.

@hestro hestro requested a review from martakam October 24, 2026 11:21
@martakam
Copy link
Member

Yup, the animation looks great! There is a merge conflict according to GitHub, so I'll just merge main in here to resolve that before approving

@martakam martakam merged commit 134b14f into main Oct 24, 2026
Sign in to join this conversation on GitHub.
Reviewers

@martakam martakam martakam approved these changes

Assignees

@hestro hestro

Labels
enhancement New feature or request refactor Restructuring of existing code in order to easy maintenance, readability or otherwise improve it.
Projects
None yet
Milestone
Deliverable 3
Development

Successfully merging this pull request may close these issues.

feat: add new shadcn UI features refactor: use shadcn components in existing UI
2 participants
@hestro @martakam